<template>
    <div class="app-container">
        <div class="head-container">
            <el-date-picker style="width: 350px;"
            v-model="searchData.filmingTimeRange"
            :default-time="['00:00:00','23:59:59']"
            type="daterange"
            unlink-panels
            range-separator="至"
            size="small"
            class="date-item"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            />
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getFinanceFlowWaterInit">搜索</el-button>     
        </div>
        <div>
            <el-divider content-position="left">寄存单</el-divider>
            <div>
                <el-row :gutter="20">
                <el-col :span="6">
                    <div class="green">
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="financeFlowWaterVo.orderPayAmount"
                            title="支出金额"
                        ></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="red">
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="financeFlowWaterVo.orderIncomeAmount"
                            title="买回金额"
                        ></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="red">
                        <el-statistic style="color:red;"
                            group-separator=","
                            :precision="2"
                            :value="financeFlowWaterVo.orderDelayIncomeAmount"
                            title="延期金额"
                        ></el-statistic>
                    </div>
                </el-col>
                </el-row>
            </div>
            <el-divider content-position="left">回收单</el-divider>
            <div>
                <el-row :gutter="20">
                <el-col :span="6">
                    <div class="green">
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="financeFlowWaterVo.recoverPayAmount"
                            title="支出金额"
                        ></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="red">
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="financeFlowWaterVo.recoverIncomeAmount"
                            title="出售金额(数据待维护)"
                        ></el-statistic>
                    </div>
                </el-col>
                
                </el-row>
            </div>
        </div>
    </div>
</template>
  
  <script>
  import checkPermission from '@/utils/permission'
  import initData from '@/mixins/crud'
  import {getFinanceFlowWater } from '@/api/yxUserExtract'
  export default {
    mixins: [initData],
    data() {
      return {
        searchData: {
            pageNum: 1,
            pageSize: 10,
            filmingTimeRange: null,
            dwName: null,
            qyName: null
        },
        financeFlowWaterVo:{},
      }
    },
    created() {
      this.$nextTick(() => {
        this.getNowDate();
      })
    },
    methods: {
      checkPermission,
      getNowDate() {
        var now = new Date()
        var year = now.getFullYear()
        var month = now.getMonth()
        var date = now.getDate()
        month = month + 1
        month = month.toString().padStart(2, '0')  //指定长度为2，不足2的话，从开始填充字符串0
        date = date.toString().padStart(2, '0')
        var defaultDate = `${year}-${month}-${date}`
        this.$set(this.searchData, 'filmingTimeRange', [defaultDate, defaultDate]);
        this.getFinanceFlowWaterInit();
      },
      getFinanceFlowWaterInit(){
        if(!this.searchData.filmingTimeRange){
            return this.$message({
                message:'开始时间和结束时间不能为空！',
                type: 'error'
              });
        }
        let startTime = this.searchData.filmingTimeRange[0];
        let endTime = this.searchData.filmingTimeRange[1];
        let data = {
            "startTime":startTime,
            "endTime":endTime,
        }
        getFinanceFlowWater(data).then(res => {
            this.financeFlowWaterVo = res;
        })
      },    
    }
  }
  </script>
  
  <style lang="scss">
  .green .title,.number{
    color: green;
    font-weight: bold;
  }
  .green .number{
    color: green;
    font-weight: bold;
  }
  .red .title{
    color: red;
    font-weight: bold;
  }
  .red .number{
    color: red;
    font-weight: bold;
  }
</style>
  